<template>
  <k-form-modal drawer width="640px" :title="`${isEdit ? '更新' : '创建'}订单`" label-width="90px" v-bind="formModalState" v-on="formModalEvent">
    <el-form-item v-if="isEdit" label="用户ID" prop="user_id" :rules="[{ required: true, message: '请输入用户ID' }]">
      <el-input v-model="state.model.user_id" clearable placeholder="请输入用户ID" disabled></el-input>
    </el-form-item>
    <el-form-item v-else label="手机号" prop="mobile" :rules="[{ required: true, message: '请输入用户手机号' }]">
      <el-input v-model="state.model.mobile" clearable placeholder="请输入用户手机号" :maxlength="11"></el-input>
    </el-form-item>
    <el-form-item label="付款金额" prop="total_fee" :rules="[{ required: true, message: '请输入付款金额' }]">
      <el-input v-model="state.model.total_fee" clearable placeholder="请输入付款金额"></el-input>
    </el-form-item>
    <el-form-item label="付款时间" prop="complete_time" :rules="[{ required: true, message: '请选择付款时间' }]">
      <el-date-picker v-model="state.model.complete_time" type="datetime" placeholder="请选择付款时间" :disabled-date="disabledDate" />
    </el-form-item>
    <el-form-item label="订单类型" prop="order_type" :rules="[{ required: true, message: '请选择订单类型' }]">
      <el-radio-group v-model="state.model.order_type" :disabled="isEdit" @change="onChangeLevel">
        <el-radio v-for="item in memberOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="购买类型" prop="month_type" :rules="[{ required: true, message: '请选择购买类型' }]">
      <el-radio-group v-model="state.model.month_type" :disabled="isEdit">
        <el-radio v-for="item in computedBuyOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="state.model.remark" type="textarea" :rows="3" maxlength="100" placeholder="请输入备注" />
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import { memberOptions, buyOptions } from '../hooks/use-table';
import { useFormModal } from '@crud/index';
import { updateOrder, createOrder } from '@/api/crm-cy/order';

const emits = defineEmits(['after-submit']);
const formRef = ref();
const isEdit = ref(false);

const UNITED_ORDER_TYPE = 3; // 联合会员order_type
const SILVER_ORDER_TYPE = 4; // 白银会员order_type

const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  formRef,
  model: {},
  getParams: (model: any) => model,
  onShow: (mode = 0, data: any) => {
    isEdit.value = !!mode;
    state.model = { ...state.model, ...data };
    state.model.complete_time = data.complete_time ? dayjs.unix(data.complete_time).format('YYYY/MM/DD HH:mm:ss') : '';
    state.model.total_fee = state.model.total_fee ? state.model.total_fee / 100 : '';
  },
  onSubmit: async (model: any, mode = 0) => {
    let res: any = {},
      { id, mobile, total_fee, complete_time, remark } = model;
    total_fee = total_fee * 100;
    complete_time = dayjs(complete_time).unix();

    if (mode === 1) {
      res = await updateOrder({
        id,
        total_fee,
        complete_time,
        remark
      });
    } else if (mode === 0) {
      res = await createOrder({
        ...model,
        mobile: mobile,
        total_fee,
        complete_time
      });
    }

    if (!res.err) {
      ElMessage.success('更新成功');
      emits('after-submit');
    }
    return res;
  }
});

const computedBuyOptions = computed(() => {
  // 联合会员只显示 ‘年卡’
  if (state.model.order_type === UNITED_ORDER_TYPE) return buyOptions.filter((o: any) => o.value === 3);
  // 白银会员只显示 ‘月卡’
  if (state.model.order_type === SILVER_ORDER_TYPE) return buyOptions.filter((o: any) => o.value === 1);
  else return buyOptions;
});

const onChangeLevel = (v: number) => {
  if (v === UNITED_ORDER_TYPE) {
    state.model.month_type = 3;
  } else if (v === SILVER_ORDER_TYPE) {
    state.model.month_type = 1;
  }
};

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

defineExpose({
  show: methods.show
});
</script>
